#{extends 'main.html' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/common.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/edit.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/navigationbar.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/commodity.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/pager/Pager.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/order.scss'}" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/pager/jquery.pager.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
<script language="javascript">
	$(function(){
		//初始化翻页控件。
		$("#pager").pager(
			{
				pagenumber: ${queryBean.currentPage}, 
				pagecount: ${queryBean.totalPage}, 
				totalcount: ${queryBean.totalQuantity},
				buttonClickCallback: PageClick 
			}
		);
		//把用户中心设置为选中状态
		$(".categorynav ul li").removeClass("active");
		$("#shoppingCar_item").addClass("active");
	});
	//翻页功能。
	PageClick = function(pageclickednumber) {
		$("#currentPage").val(pageclickednumber);
		doSearch();
	}
	
	function doSearch() {
		$("#form1").submit();
	}
</script>
<div id="edit-comment">
	<center><h1>购物车</h1></center>
	<div id="errMsg" class="error">
		${errMsg}
	</div>
	<table class="commodity-query">
		#{form @ShoppingCars.shoppingCar(), name:'form1', id:'form1'}
			<input type="hidden" id="currentPage" name="queryBean.currentPage" value="${queryBean.currentPage}">
			每页
			<select name="queryBean.quantityEachPage" onchange="doSearch()">
				<option value="2" #{if queryBean.quantityEachPage==2} selected #{/if}>2</option>
				<option value="10" #{if queryBean.quantityEachPage==10} selected #{/if}>10</option>
				<option value="25" #{if queryBean.quantityEachPage==25} selected #{/if}>25</option>
				<option value="50" #{if queryBean.quantityEachPage==50} selected #{/if}>50</option>
			</select>
			条记录
		#{/form}
	</table>
	<table class="commodity-table">
		<thead>
			<tr>
				<th>产品图片</th>
				<th>编号</th>
				<th>名称</th>
				<th>单价</th>
				<th>装箱数</th>
				<th>现货数量</th>
				<th>订货数量</th>
				<th>备注</th>
				<th>小计</th>
				<th>移除</th>
			</tr>
		</thead>
		#{if shoppingCars}
			#{list items:shoppingCars, as:'shoppingCar'}
			<tr>
				<td>
					<input type="hidden" class="shoppingCarIds" value="${shoppingCar.id}">
					<a href="/commodities/${shoppingCar.commodity.id}">
						#{if shoppingCar.commodity.images}
							#{list items:shoppingCar.commodity.images, as:'image'}
								#{if image.sequence == 1}
								<img class="midImg" src="@{Attachments.show(image.image.id)}">
								#{/if}
							#{/list}
						#{/if}
						#{else}
						<img class="midImg" src="@{'public/images/favicon.png'}">
						#{/else}
					</a>
				</td>
				<td><a href="/commodities/${shoppingCar.commodity.id}">${shoppingCar.commodity.SN}</a></td>
				<td><a href="/commodities/${shoppingCar.commodity.id}">${shoppingCar.commodity.name}</a></td>
				<td><span class="price">${shoppingCar.commodity.price}</span>&nbsp;元</td>
				<td>500</td>
				<td>
					#{if shoppingCar.commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_LIMITED}
						${shoppingCar.commodity.quantityLeft}&nbsp;${shoppingCar.commodity.unit}
					#{/if}
					#{if shoppingCar.commodity.onSaleStatus == models.Commodity.OnSaleStatus.ONSALE_UNLIMITED}
						<font class="important">长期有货</font>
					#{/if}
					#{if shoppingCar.commodity.onSaleStatus == models.Commodity.OnSaleStatus.OFFSALE}
						<font class="important">已下架</font>
					#{/if}
				</td>
				<td><input id="quantity_${shoppingCar.id}" maxlength="5" type="text" maxlength="4" size="3" value="${shoppingCar.quantity}">${shoppingCar.commodity.unit}</td>
				<td><input id="remark_${shoppingCar.id}" maxlength="255" type="text" size="8" value="${shoppingCar.remark}"></td>
				<td><span class="price">${shoppingCar.commodity.price*shoppingCar.quantity}</span>&nbsp;元</td>
				<td>
					<a href="javascript:removeItem(${shoppingCar.id})" title="移除">
						<img class="minImg" src="@{'public/images/delete.gif'}">
					</a>
				</td>
			</tr>
			#{/list}
		#{/if}
		#{else}
			<tr>
				<td colspan="10">没找到记录。</td>
			</tr>
		#{/else}
	</table>
	<div>
		<input type="button" class="button1" value="生成订单" onClick="generateOrder()">
		<input type="button" class="button1" value="保存并计算" onClick="save()">
		<input type="button" class="button1" value="清空购物车" onClick="removeAll()">
	</div>
	<div id="pager"></div>
	
	<script language="javascript">
	//删除指定商品
	function removeItem(id) {
		$.ajax({
			url: "@{shoppingCars.shoppingCarRemove()}",
			data: "id="+id,
			type: "GET",
			complete: function() {
				doSearch();
			}
		});
	}
	//保存并计算。
	function save(callBack){
		var shoppingCarIds = $(".shoppingCarIds");
		if(!shoppingCarIds || shoppingCarIds.length==0) {
			alert("没有记录。");
		}
		var dataStr = "";
		for(var i=0 ; i<shoppingCarIds.length ; i++) {
			var id = shoppingCarIds[i].value;
			var quantity = $("#quantity_"+id).val();
			var remark = $("#remark_"+id).val();
			if(i != 0) dataStr += "&";
			dataStr = dataStr + "shoppingCars[" + i + "].id=" + id;
			dataStr = dataStr + "&" + "shoppingCars[" + i + "].quantity=" + quantity;
			dataStr = dataStr + "&" + "shoppingCars[" + i + "].remark=" + remark;
		}
		$.ajax({
			url: "@{shoppingCars.saveShoppingCars()}",
			data: dataStr,
			type: "GET",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "保存失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
				} else {
					if(callBack) {
						callBack();
					} else {
						var errMsg = "保存成功。";
						$("#errMsg").html(errMsg);
						alert(errMsg);
						doSearch();
					}
				}
			}
		});
	}
	//清除所有商品。
	function removeAll(){
		if(!confirm("确定要清空购物车？")) return;
		$.ajax({
			url: "@{shoppingCars.shoppingCarRemoveAll()}",
			type: "GET",
			complete: function() {
				doSearch();
			}
		});
	}
	//生成订单。
	function generateOrder() {
		save(function(){
			$.ajax({
				url: "@{shoppingCars.validateShoppingCarLogic()}",
				type: "GET",
				dataType: "json",
				complete: function(XMLHttpRequest, textStatus, errorThrown) {
					if(textStatus == "error") {
						var errJson = eval("("+XMLHttpRequest.responseText+")");
						var errMsg = "验证失败，"+errJson.message;
						$("#errMsg").html(errMsg);
						alert(errMsg);
					} else {
						//alert("校验通过了。");
						window.location.href="@{orders.newOrder()}";
					}
				}
			});
		});
	}
	</script>
</div>